<template>
	<view class="content">

    <view >
      <web-view :src="link"></web-view>
    </view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			swiperIndex: 0,
			swiperList: [
				{
					id: 1,
					img: "http://sni1muz85.hd-bkt.clouddn.com/img/index/swiper.png",
				},
				{
					id: 2,
					img: "http://sni1muz85.hd-bkt.clouddn.com/img/index/swiper2.jpeg",
				}
			],
			navbarIndex: 0,
			navbarList: [
				[
					{
						id: 1,
						icons: "http://sni1muz85.hd-bkt.clouddn.com/img/index/icon1.png",
						title: "导航1"
					},
					{
						id: 2,
						icons: "http://sni1muz85.hd-bkt.clouddn.com/img/index/icon2.png",
						title: "导航2"
					},
					{
						id: 3,
						icons: "http://sni1muz85.hd-bkt.clouddn.com/img/index/icon1.png",
						title: "导航3"
					},
					{
						id: 4,
						icons: "http://sni1muz85.hd-bkt.clouddn.com/img/index/icon2.png",
						title: "导航4"
					},
				],
				[
					{
						id: 5,
						icons: "http://sni1muz85.hd-bkt.clouddn.com/img/tabBar/my.png",
						title: "导航5"
					},
				]
			],
      webViewLink:null,
			adList: [
				{ id: 1, img: "http://sni1muz85.hd-bkt.clouddn.com/img/index/swiper.png" }
			],
      link:""
		};
	},

	onLoad(item) {
    // this.initData()
    this.link=item.link
  },

	methods: {
		// 轮播图跳转
		goSwiperDetail(item) {
      console.log(item)
      if(item.type===0){
        return
      }
      if (item.type===1) {
        uni.navigateTo({
          url: "/pages/detail/swiperDetail?text=" + item.content
        })
      }
      if (item.type===2) {
        uni.navigateTo({
          url: item.link
        })
        // this.webViewLink=item.link
      }
		},
    // watch: {
    //   webViewLink: {
    //     handler(val) {
    //       console.log("123")
    //       this.webViewLink = val
    //     },
    //     immediate: true,
    //     deep: true,
    //   },
    // },
    initData(){
      this.$api.request({
        url:this.$api.getBanner,
      }).then(res=>{
        this.swiperList=res.data;
      })
    },
		// 导航栏跳转
		goNavbarDetail(item) {
      console.log("123123")
      uni.login({
        provider: 'weixin',
        success: function (loginRes) {
          console.log(loginRes)
          // 登录成功
          uni.getUserInfo({
            provider: 'weixin',
            success: function(info) {
              console.log(info)
              // 获取用户信息成功, info.authResult保存用户信息
            }
          })
        },
        fail: function (err) {
          console.log(err)
          // 登录授权失败
          // err.code是错误码
        }
      });

			// uni.navigateTo({
			// 	url: `/pages/detail/navbarDetail?title=${item.title}`,
			// })
		},

		// 页面跳转
		goUrl(url) {
			uni.navigateTo({
				url: url,
			})
		},

		// 轮播图切换时
		swiperChange(e) {
			// console.log("swiperIndex", e.detail.current)
			this.swiperIndex = e.detail.current
		},

		// 导航栏切换
		changeNavbar(e) {
			this.navbarIndex = e.detail.current
		}
	},
};
</script>

<style lang="less" scoped>
@import "@/static/css/app.less";

.content {
	display: flex;
	flex-direction: column;
	align-items: center;

	.swiper-box {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.swiper {
			height: 600rpx;
			width: 750rpx;

			.swiper-item {
				height: 100%;
				width: 100%;

				.swiper-img {
					height: 100%;
					width: 100%;
				}
			}
		}

		.swiper-dost {
			display: flex;
			position: absolute;
			bottom: 70rpx;

			.item {
				height: 30rpx;
				width: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.dost {
					height: 10rpx;
					width: 10rpx;
					border-radius: 50%;
					background-color: #ccc;
				}

				.dost-on {
					height: 15rpx;
					width: 15rpx;
					border-radius: 50%;
					background-color: #fff;
				}
			}
		}
	}

	.btn-box {
		width: 710rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		// margin-top: 50rpx;
		border-radius: @radius;
		background-color: #fff;
		padding: 50rpx 0;
		position: relative;
		top: -50rpx;
		// box-shadow: 0rpx 10rpx 20rpx #ccc;

		.btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin: 0 100rpx;

			image {
				height: 87rpx;
				width: 87rpx;
			}

			text {
				font-size: 36rpx;
				font-weight: bold;
				margin-top: 20rpx;
			}

			.time {
				font-size: 28rpx;
				color: #8C8C8C;
				position: absolute;
				bottom: 16rpx;
			}
		}

		.solid {
			height: 106rpx;
			border-left: 1rpx solid #cccccc;
		}
	}

	.navbar-box {
		width: 710rpx;
		height: 200rpx;
		background-color: #fff;
		position: relative;
		top: -20rpx;
		border-radius: @radius;

		.navbar {
			width: 710rpx;
			height: 200rpx;

			.navbar-item {
				width: 25%;
				display: inline-block;
				text-align: center;
				margin: 32rpx 0rpx;

				.navbar-img {
					height: 74rpx;
					width: 74rpx;
				}

				.navbar-title {
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}
		}

		.navbar-dost {
			width: 710rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			top: -25rpx;

			.box {
				height: 10rpx;
				display: flex;
				background-color: #aaa;
				border-radius: 30%;

				.item {
					.dost {
						height: 10rpx;
						width: 20rpx;
						// background-color: #aaa;
						// border-radius: 30%;
					}

					.dost-on {
						height: 10rpx;
						width: 20rpx;
						background-color: #07C160;
						border-radius: 30%;
					}
				}
			}
		}
	}

	.ad {
		width: 710rpx;
		display: flex;

		.ad-item {
			width: 100%;
			margin-top: 20rpx;

			.ad-img {
				height: 100%;
				width: 100%;
				border-radius: @radius;
			}
		}
	}
}
</style>